import React from 'react'
import { Card, Col, Icon, Pagination, Row, Tag } from 'antd'
import { connect } from 'react-redux'
import MySubscriptionLayout from './my-subscription-layout'
import { withRouter } from 'react-router-dom'
import { getApplications } from '../../actions/application'

class MyApplicationBody extends React.Component {
  state = {
    current : 1
  }
  componentDidMount = () =>{
    const {current} = this.state
    this.props.getApplications(current)
  }

  render () {
    const {serialsApplicationsPageable} = this.props
    return <MySubscriptionLayout>
      {
        serialsApplicationsPageable.content.map((application, index) => {
          return <Row type='flex' justify='center' key={index}>
            <Col span={20} className='margin-b-2 application-card'>
              <Card
                key={index}
                title={<span>
                  <Tag>{application.type === 'serial' ? '系列' : '视频'}</Tag>
                  {application.title}</span>}
                extra={<div>
                  <span><Icon type='solution' /> <b>{application.applicant}</b></span><br />
                  <span><Icon type='clock-circle' /> {application.createTime}</span>
                </div>}
            >
                <div style={{minHeight: '100'}}>
                  {application.reason}
                </div>
                <Row type='flex' justify='end'>
                  {
                  application.status
                }
                </Row>
              </Card>
            </Col>
          </Row>
        })
      }
      <Pagination defaultCurrent={1}
        total={10}
        hideOnSinglePage
        defaultPageSize={10}
        onChange={this.paginationChange} />
    </MySubscriptionLayout>
  }
}

const mapStateToProps = ({serialsApplicationsPageable}) => ({serialsApplicationsPageable})
const mapDispatchToProps = dispatch => ({
  getApplications: current => dispatch(getApplications(current))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MyApplicationBody))
